/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:吕艳阳
 */

import React, {FC, useMemo} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import {Input} from 'antd';
import service from './service';
import {ParamModel} from './data';
import Details from './components/Details';
import Edit from './components/Edit';
import ProTableCrud, {ProTableCrudOperate} from "@/components/ProTableCrud";
import useList, {ListOperate} from "@/hooks/useList";
import useDelete from "@/hooks/useDelete";
import DicSelect from "@/components/Dic/DicSelect";
import config from "@/config";
import {hasPermission} from "@/utils/utils";
import Permission from "@/components/Permission";
import useDialog from "@/hooks/useDialog";

/** 系统参数模块 */
const ParamPage: FC = () => {
  const editOperate = useDialog();
  const detailsOperate = useDialog();

  //List
  const listOperate = useList<ParamModel>({
    onLoad: (params) => service.selectPageList(params),
    onExport: (params) => service.export(params),
  });
  //Delete
  const deleteOperate = useDelete<ParamModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  //表格列
  const cols = useMemo(() => getCols(listOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<ParamModel> = {
    cols,
    showCreate: hasPermission(config.permission.sysParam.insert),
    showEdit: hasPermission(config.permission.sysParam.update),
    showDelete: hasPermission(config.permission.sysParam.delete),
    showDetails: hasPermission(config.permission.sysParam.select),
    showExport: hasPermission(config.permission.sysParam.export),
    listOperate,
    deleteOperate,
    editOperate,
    detailsOperate,
    getToolbarItems: (_, __) => ['create', 'edit', 'delete', 'export',],
    getEditElement: (props) => (<Edit {...props}/>),
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <Permission code={config.permission.sysParam.select}>
      <ProTableCrud headerTitle="系统参数列表" scroll={{x: 1200}} operate={tableOperate}/>
    </Permission>
  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<ParamModel>): (ProColumns<ParamModel>[]) {
  return [
    {
      title: '关键字',
      key: 'name',
      hideInTable: true,
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<Input {...rest} placeholder="请输入参数关键字查询"/>)
      },
    },
    {
      title: '参数名称',
      dataIndex: 'name',
      width: 250,
      ellipsis: true,
      sorter: true,
      hideInSearch: true,
    },
    {
      title: '参数编码',
      dataIndex: 'code',
      width: 250,
      ellipsis: true,
      sorter: true,
      hideInSearch: true,
    },
    {
      title: '参数值',
      dataIndex: 'value',
      width: 280,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '分类',
      dataIndex: 'category',
      align: 'center',
      width: 80,
      filters: undefined,
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<DicSelect
          {...rest}
          dicCode={config.dics.sysParamCategory}
          allowClear
          onSelect={listOperate.handleSearch}
          placeholder="请选择参数分类"
        />)
      },
      render: (_, r) => r.categoryName,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      ellipsis: true,
      hideInSearch: true,
    }
  ]
}

export default ParamPage;
